<template>
  <div class="search-wrap">
    <div class="search-box">
      <div class="search-content">
        <div class="search-box-left">
          <div class="tit">Search for acurat compound</div>
          <div class="form-box">
            <el-form :model="searchForm">
              <el-form-item label="Select search words:">
                <el-select
                  v-model="searchForm.type"
                  placeholder="Select search words"
                >
                  <el-option
                    v-for="(item, index) in typeOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                  <!-- <el-option label="区域二" value="beijing"></el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="Input a gene:">
                <el-input v-model="searchForm.gene" placeholder="Input a gene">
                </el-input>
              </el-form-item>
            </el-form>
            <div class="search-btn" @click="handleSearch">
              <i class="el-icon-search"></i>
              Search
            </div>
          </div>
        </div>
        <div class="search-box-right" :class="{ phone: isPhone }">
          <p class="right-tit">Tips:</p>
          <p class="right-content">
            Input a PCG or lncRNA to query its related functional states. Gene
            name and ensemble ID are allowed. For example, SOX4 or
            ENSG00000124766, VIM or ENSG00000026025.
          </p>
        </div>
      </div>
      <div class="search-box-line"></div>
    </div>
    <div class="search-box batch-search-box">
      <div class="search-content">
        <div class="search-box-left">
          <div class="tit">Batch search for compound</div>
          <div class="form-box">
            <el-form :model="batchSearchForm">
              <el-form-item label="Select search words:">
                <el-select
                  v-model="batchSearchForm.type"
                  placeholder="Select search words"
                >
                  <el-option
                    v-for="(item, index) in batch_typeOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Input a gene:" class="batch-input-box">
                <el-input
                  v-model="batchSearchForm.gene"
                  placeholder="Input a gene"
                  type="textarea"
                  :rows="4"
                  resize="none"
                >
                </el-input>
                <div class="batch-input-btn-box" :class="{ phone: isPhone }">
                  <i class="batch-input-btn set" title='复制' @click="copyContent"></i>
                  <i class="batch-input-btn del" title='删除' @click="delContent"></i>
                </div>
                <!-- <div class="tips">
                  <i class="el-icon-warning-outline"></i>错误提示
                </div> -->
              </el-form-item>
              <el-form-item
                label="Or upload a Excel Sheet or TXT file:"
                class="batch-input-box upload-label"
                :class="{ phone: isPhone }"
              >
                <el-upload
                  class="upload-batch-search"
                  drag
                  :action="baseURL"
                  :on-success="handleSuccess"
                  :before-upload="beforeUpload"
                  :on-change="onUpload"
                  :file-list="fileList"
                  accept=".xls,.xlsx,.txt"
                  :auto-upload="false"
                  :on-remove="handleRemove"
                >
                  <i class="upload-image"></i>
                  <p class="upload-tips">Drag and drop files to upload</p>
                </el-upload>
                <div class="batch-input-btn-box example">
                  <i class="batch-input-btn txt" title='txt示例下载' @click="downFile(0)"></i>
                  <i class="batch-input-btn xls" title='excel示例下载' @click="downFile(1)"></i>
                </div>
              </el-form-item>
            </el-form>
            <div class="search-btn" @click="handleBatchSearch">
              <i class="el-icon-search"></i>
              Search
            </div>
          </div>
        </div>
        <div class="search-box-right" :class="{ phone: isPhone }">
          <p class="right-tit">Tips:</p>
          <div class="right-content">
            1.
            <p>
              You can input a gene list to query its related functional states.
            </p>
          </div>
          <div class="right-content">
            2.
            <p>
              You can also select Pre-specified signatures(including cancer
              hallmarks from GO,MsigDB,and cancer pathwayes from KEGG or
              Reactome).
            </p>
          </div>
          <div class="right-content">
            3.
            <p>
              Gene name and ensemble ID are allowed,and the gene list should be
              separated by commas. For example: "VIM,MT2A,ANXA2,ANXA1,S100A6"
            </p>
          </div>
          <div class="right-content">
            4.
            <p>
              You can also upload txt files separated by commas, with all genes on one line; Or excel file, all genes are in the first column.
            </p>
          </div>
        </div>
      </div>
      <div class="search-box-line line2"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { copyContent } from "@/utils/common";
export default {
  data() {
    return {
      typeOptions: [
        "punchem_cid",
        "smiles",
        "inchikey",
        "inchi",
        "iupac_name",
        "all",
      ],
      batch_typeOptions: [
        "punchem_cid",
        "smiles",
        "inchikey",
        "inchi",
        "iupac_name",
      ],
      searchForm: {
        type: "all",
        gene: "",
      },
      batchSearchForm: {
        type: "",
        gene: "",
        file: null,
      },
      // baseURL: `${window.VUE_APP_BASE_URL}/imageData/uploadVideoFile`
      baseURL: ``,
      fileList: [],
    };
  },
  computed: {
    ...mapState({
      isPhone: (state) => state.isPhone,
    }),
  },
  methods: {
    handleSearch() {
      if (!this.searchForm.type) {
        this.$message({
          message: "Select search words!",
          type: "warning",
        });
        return;
      }
      // if (!this.searchForm.gene) {
      //   this.$message({
      //     message: "Input a gene!",
      //     type: "warning",
      //   });
      //   return;
      // }

      this.$router.push({
        path: "/searchAcuratCompound",
        query: this.searchForm,
      });
    },
    handleBatchSearch() {
      // console.log(typeof(this.batchSearchForm.gene),'type')
      // if(!this.batchSearchForm.gene) 
      this.$store.commit("set_batchSearchForm", this.batchSearchForm);
      this.$store.dispatch("handleBatchSearch");
    },
    beforeUpload(file) {
      const sizeLimit = file.size / 1024 / 1024 / 1024 < 1; //这里做文件大小限制 1GB!
      if (!sizeLimit) {
        this.$message({
          message: "Upload file size cannot exceed 1GB!",
          type: "warning",
          showClose: true,
        });
        return false;
      }
      this.loading = this.$loading({
        lock: true,
        text: "Trying to upload...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    handleSuccess(data, file, fileList) {
      // console.log('handleSuccess', data.indexOf('200'), data, file, fileList)
      if (data.indexOf("500") != -1) {
        this.$message({
          type: "error",
          message: data.split(",")[1],
          showClose: true,
        });
        this.handleRemove(file);
        return;
      }
      if (!this.formLabelAlign.fileName) {
        this.formLabelAlign.fileName = file.raw.name;
      }
      this.uploadFileName = file.raw.name;
    },
    onUpload(file, fileList) {
      this.fileList = fileList.slice(-1);
      this.batchSearchForm.file = file.raw;
      // let fileReader = new FileReader();
      // fileReader.readAsText(file.raw, "utf8");
      // fileReader.onload = (e) => {
      //   // console.log(222, file,e,fileReader.result);
      // };
    },
    // 移除上传的文件
    handleRemove(file) {
      this.fileList.pop(file);
    },
    copyContent() {
      copyContent(this.batchSearchForm.gene).then(() => {
        this.$message({
          message: "copy success!",
          type: "success",
        });
      });
    },
    delContent() {
      this.batchSearchForm.gene = "";
      this.$message({
        message: "delete success!",
        type: "success",
      });
    },
    downFile(index){
       // /DownloadController/downloadGene?type=0  参数type  0:txt; 1:excel
      window.open(
        window.VUE_APP_BASE_URL +
          "/DownloadController/downloadGene?type=" +
          index
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.search-wrap {
  padding-bottom: 50px;
  .search-box {
    position: relative;
    width: 83.33vw;
    max-width: 1200px;
    margin: 24px auto 0;
    background-color: #fff;
    .search-box-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 6px;
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      &.line2 {
        background: linear-gradient(270deg, #50aaf8 0%, #4962ff 100%);
      }
    }
    .search-content {
      display: flex;
      padding: 30px 24px;
      .search-box-left {
        .tit {
          font-size: 20px;
          font-weight: bold;
          color: #17233d;
          line-height: 24px;
        }
        /deep/.form-box {
          .el-form-item__label {
            font-size: 14px;
            font-weight: bold;
            color: #17233d;
            line-height: 32px;
            margin-top: 17px;
            &::before {
              display: none;
            }
          }
          .upload-label.phone {
            .el-form-item__label {
              line-height: 1.5;
              text-align: left;
              padding-bottom: 5px;
            }
          }
          .el-input,
          .el-textarea {
            width: 34.72vw;
            max-width: 500px;
          }
          .el-input__inner,
          .el-textarea__inner {
            border: none !important;
            background-color: #f1f2f7;
            font-size: 14px;
            color: #515a6e;
          }
          .el-form-item__error {
            padding: 0 0.15rem;
          }
          .el-input__icon {
            color: #808695;
            &::before {
              content: "\e78f";
            }
          }
          .el-form-item {
            margin-bottom: 0;
          }
        }
        // .example{
        //   position: absolute;
        //   top: 50px;
        //   right: -20px;
        //   span{
        //     text-decoration: underline;
        //     margin-right: 10px;
        //     color: #5863fe;
        //     cursor: pointer;
        //   }
        // }
        .tips{
          font-size:18px; color: red;
          i{
            font-size: 20px; 
            margin-right:5px;
          }
          
        }
        .search-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 40px;
          background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
          border-radius: 2px;
          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
          cursor: pointer;
          margin-top: 24px;
          .el-icon-search {
            margin-right: 5px;
          }
        }
      }
      .search-box-right {
        width: 34.72vw;
        max-width: 500px;
        margin-left: 80px;
        padding-top: 38px;
        font-size: 14px;
        color: #808695;
        &.phone {
          padding: 0;
          margin-left: 0;
        }
        .right-tit {
          font-weight: bold;
          line-height: 32px;
          margin-bottom: 5px;
        }
        .right-content {
          line-height: 24px;
        }
      }
    }
  }
  .batch-search-box {
    .search-content {
      .search-box-right {
        &.phone {
          padding-left: 10px;
        }
        .right-content {
          display: flex;
          p {
            width: 100%;
            padding-left: 10px;
            word-wrap: break-word;
          }
        }
      }
      /deep/ .batch-input-box {
        position: relative;
        .batch-input-btn-box {
          position: absolute;
          top: 50px;
          right: -20px;
          &.phone {
            right: 0;
          }
          .batch-input-btn {
            display: block;
            
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
            &.set {
              width: 16px;height: 16px;
              background-image: url("../assets/img/icon_ex@2x.png");
              margin-bottom: 8px;
            }
            &.del {
              width: 16px;height: 16px;
              background-image: url("../assets/img/icon_clean@2x.png");
            }
            &.txt {
              width: 16px;height: 16px;
              background-image: url("../assets/img/txt.png");
              margin-bottom: 8px;
            }
            &.xls {
              width: 16px;height: 16px;
              background-image: url("../assets/img/xls.png");
            }
          }
        }
        .example{
          // right: -40px;
        }
      }
      /deep/ .upload-batch-search {
        .el-upload {
          width: 34.72vw;
          max-width: 500px;
          .el-upload-dragger {
            width: 100%;
            background-color: #f1f2f7;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
          }
        }
        .upload-image {
          display: block;
          width: 63px;
          height: 40px;
          background: url("../assets/img/upload_img@2x.png") no-repeat center;
          background-size: contain;
        }
        .upload-tips {
          font-size: 14px;
          font-family: Helvetica;
          color: #808695;
          line-height: 32px;
          padding-top: 8px;
        }
      }
    }
  }
}
</style>
